<template>
  <GridPage title="我的企业" size="full">
    <n-card class="mt-12">
      <n-flex>
        <n-avatar :size="96" :src="companyData.company_icon" />
        <n-flex vertical justify="space-around">
          <n-flex align="center">
            <h1>{{ companyData.company_name }}</h1>
            <n-tag :bordered="false" :type="state?.type">{{ state?.label }}</n-tag>
          </n-flex>
          <n-flex>
            <span>{{ industry }}</span>
            ·
            <span>{{ size }}</span>
            ·
            <span>{{ address }}</span>
          </n-flex>
          <n-flex>
            <n-tag round v-for="item in companyData.company_tags">{{ item }}</n-tag>
          </n-flex>
        </n-flex>
      </n-flex>
    </n-card>

    <div class="mt-12 flex">
      <n-card class="w-80%">
        <n-flex vertical>
          <h2>公司简介</h2>
          <p v-for="item in descriptions" class="mt-12">{{ item }}</p>
        </n-flex>
        <!-- <n-flex vertical class="mt-40">
          <h2>公司相册</h2>
          <n-carousel show-arrow autoplay dot-type="line">
            <img v-for="item in companyData.company_album" :src="item" />
          </n-carousel>
        </n-flex> -->
      </n-card>
      <n-card class="min-w-200 ml-12 w-20%">
        <n-flex vertical>
          <h2>公司福利</h2>
          <div v-for="item in companyData.benefit_tags">
            <n-tag round>{{ item }}</n-tag>
          </div>
        </n-flex>
      </n-card>
    </div>
  </GridPage>
</template>

<script setup>
import { getIndustriesName, getCity } from '@/data'
import { GridPage } from '@/components'
import companyApi from '@/api/company'
import { useRecruiterStore } from '@/store/modules/recruiter'
const router = useRouter()
const recruiterStore = useRecruiterStore()

const companyData = ref({
  company_name: '无信息',
  state: 0,
  description: '公司描述',
})

const stateList = [
  { value: 0, type: 'error', label: '未认证' },
  { value: 1, type: 'success', label: '已认证' },
  { value: 2, type: 'error', label: '认证失败' },
]

const sizeList = [
  '20人以下',
  '20-50人',
  '50-100人',
  '100-200人',
  '200-500人',
  '500-1000人',
  '1000-2000人',
  '2000-5000人',
  '5000人以上',
]

let size = computed(() => {
  if (companyData.value.size === undefined) return '未知规模'
  return sizeList[companyData.value.size]
})
let industry = computed(() => {
  if (!companyData.value.industry_code) return '未知行业'
  return getIndustriesName(companyData.value.industry_code)
})
let address = computed(() => {
  if (!companyData.value.address_code) return '未知地点'
  return getCity(companyData.value.address_code)
})
let state = computed(() => {
  return stateList[companyData.value.state]
})

let descriptions = computed(() => {
  return companyData.value.description?.split(/[\r\n]+/)
})

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const company_id = recruiterStore.recruiter.company_id
  if (!company_id) {
    $dialog.create({
      title: '暂无企业信息',
      content: '您暂未加入任何企业，请添加企业后重试',
      positiveText: '加入企业',
      negativeText: '注册企业',
      closable: false,
      maskClosable: false,
      onPositiveClick() {
        router.push('/recruiter/companyJoin')
      },
      onNegativeClick() {
        router.push('/recruiter/companyAuthenticate')
      },
    })
  } else {
    const { data } = await companyApi.getCompanyInfo(recruiterStore.recruiter.company_id)
    companyData.value = data
  }
})
</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>
